<template>
  <div style="background-color: #f5f7f9; height: auto">
    <!-- 顶部栏 -->
    <IndexHeader
        ref="headerRef"
        :selectedIndex="data.selectedIndex"
        @tabIndexChange="tabChangeHandle"
    ></IndexHeader>
    <!--    课程类型和轮播图-->
    <div style="width: 100%; z-index: -10;">
      <div class=""
           style="position: absolute; top: 90px;width: 280px;z-index: 999; left: 50%;margin-left: -590px;height: 506px;">
        <div
            class="course-type-container"
            style="width: 280px;height: 506px;overflow-y: auto;background: rgba(255, 255, 255, 0.9);"
        >
          <CourseTypeList
              :courseTypeList="data.courseTypeList"
              @selectHandle="goCourseCenter"
          ></CourseTypeList>
        </div>
      </div>
      <el-carousel height="506px">
        <el-carousel-item v-for="item in data.bannerList" :key="item">
          <img
              :src="item.imageUrl"
              alt=""
              class="width100 tw-min-w-1180 tw-object-cover"
              style="height: 506px"
              @click="openBannerLink(item.linkUrl)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="flex-column-center container" style="">

      <!--      意向课程-->
      <IntentCourse
          :courseTypeList="data.courseTypeList"
          :intentionalExam="data.userInfo.intentionalExam"
          :intentionalExamId="data.userInfo.intentionalExamId"
      ></IntentCourse>
      <!--      课程中心-->
      <CourseCenter
          :courseTypeList="data.courseTypeList"
        @goCourseCenter="goCourseCenter"
        @goNewsInfo="goNewsInfo"
      ></CourseCenter>
      <!--      讲师-->
      <TeacherBanner />
      <!--      宣传语-->
<!--      <WelcomeCard :welcomeList="data.welcomeList"></WelcomeCard>-->
      <WelcomeCard ></WelcomeCard>
      <!--      合作企业和友情链接-->
      <FooterLink ></FooterLink>
    </div>
    <!--    底部栏-->
    <Footer />
  </div>
  <contact-customer-dialog  ref="costomerDialog"></contact-customer-dialog>
</template>
<script setup>
import {onBeforeMount, reactive, ref} from "vue";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import IndexHeader from "../component/header.vue";
import CourseCenter from "../component/course-center.vue";
import TeacherBanner from "../component/teacher-banner.vue";
import WelcomeCard from "../component/welcome-card.vue";
import FooterLink from "../component/footer-link.vue";
import Footer from "../component/footer.vue";
import IntentCourse from "../component/intent-course.vue";
import CourseTypeList from "../component/course-type-list.vue";
import {getUserInfo} from "../../api/user.js";
import {getTreeDictByCode, listBanner} from "../../api/home.js";
import {formatNull} from "../../utils/common.js";
import ContactCustomerDialog from "@/views/component/contact-customer-dialog.vue";

const headerRef = ref(null);
const route = useRoute();
const router = useRouter();
const store = useStore();
const data = reactive({
  userInfo: {
    intentionalExamId: null,
    intentionalExam: "",
  },
  bannerList: [],
  courseTypeList: [],
  welcomeList: {},
  showSelectExamDialog: false,
  hasInit: false,
  selectedIndex: 0,
});

onBeforeMount(() => {
  initData();
  let token = localStorage.getItem("token");
  if (data.selectedIndex == 0 && token) {
    // getUserInfoHandle();
  }
});
function getUserInfoHandle() {
  getUserInfo((res) => {
    data.userInfo = res.data;
    localStorage.setItem(
      "intentionalExam",
      formatNull(data.userInfo.intentionalExam),
    );
    localStorage.setItem(
      "intentionalExamId",
      formatNull(data.userInfo.intentionalExamId),
    );
    localStorage.setItem("provinceName", formatNull(data.userInfo.provinceName))
    localStorage.setItem("provinceId", formatNull(data.userInfo.provinceId))
  });
}

function initBanner() {
  listBanner({ catalogCode: "courseIndexCode" }, (res) => {
    data.bannerList = res.data;
  });
}
function initCourse() {
  getTreeDictByCode({ typeCode: "courseTypeCode" }, (res) => {
    data.courseTypeList = res.data;
    getIntentionalExam();
  });
}
function getIntentionalExam() {
  let intentionalExamId = localStorage.getItem("intentionalExamId");
  let intentionalExam = localStorage.getItem("intentionalExam");
  data.userInfo.intentionalExamId =
    intentionalExamId || data.courseTypeList[0].id;
  data.userInfo.intentionalExam =
    intentionalExam || data.courseTypeList[0].name;
}

function initData() {
  initBanner();
  initCourse();
}

function login(code) {
  router.push({
    path: "/login",
    query: {
      code: code,
    },
  });
}
function goNewsInfo(id) {
  const { href } = router.resolve({
    path: "/article/info",
    query: {
      id: id,
    },
  });
  window.open(href, "_blank");
}
function goCourseCenter(id) {
  const {href} = router.resolve({
    path: "/course/center",
    query: {
      courseType: id,
    },
  });
  window.open(href, "_blank");
}
let costomerDialog=ref()
function openBannerLink(url) {
  if(url==="客服"){
    costomerDialog.value.openDialog('kechengzixun')
  }else{
    window.open(url, "_blank");
  }

}

function tabChangeHandle(index) {
  data.selectedIndex = index==4?data.selectedIndex:index;
  // data.showIndex = true
  window.scrollTo({
    left: 0,
    top: 0,
  });
  headerRef.value.setSelectedIndex(index);
  if (index == 0 && !data.hasInit) {
    initData();
  }
}
</script>

<style>
body::-webkit-scrollbar {
  display: none;
}
.course-type-container::-webkit-scrollbar {
  display: none;
}
</style>
